<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>okCHAT</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav chat-topbg">
			<h1 class="mui-title chat-topcolor"><b>okCHAT</b></h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabIndex="0">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">okCHAT</span>
			</a>
			<a class="mui-tab-item" tabIndex="1">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabIndex="2">
				<span class="mui-icon mui-icon-paperplane"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabIndex="3">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			
			mui.plusReady(function() {
				// 导航栏样式
				plus.navigator.setStatusBarBackground("#c9394a");
				plus.navigator.setStatusBarStyle("light");
				// webview页面
				var pageArray = [{
						pageId: "chat-list.html",
						pageUrl: "chat-list.html"
					},
					{
						pageId: "chat-contact.html",
						pageUrl: "chat-contact.html"
					},
					{
						pageId: "chat-discover.html",
						pageUrl: "chat-discover.html"
					},
					{
						pageId: "chat-me.html",
						pageUrl: "chat-me.html"
					}
				];
				var currentWebview = plus.webview.currentWebview();
				var webviewStyle = {
					top: "44px",
					bottom: "50px"
				};
				for (var i = 0; i < pageArray.length; i++) {
					var webviewObject = plus.webview.create(pageArray[i].pageUrl, pageArray[i].pageId, webviewStyle);
					webviewObject.hide();
					currentWebview.append(webviewObject);
				}
				plus.webview.show(pageArray[0].pageId);
				// 为底部导航绑定tap事件
				mui(".mui-bar-tab").on("tap", "a", function() {
					var tabIndex = this.getAttribute("tabIndex");
					plus.webview.show(pageArray[tabIndex].pageId, "fade-in", 200);
					// 隐藏其它页面
					for (var i = 0; i < pageArray.length; i++) {
						if (i != tabIndex) {
							plus.webview.hide(pageArray[i].pageId, "fade-out", 200);
						}
					}
				});
			});
		</script>
	</body>
</html>
